<template>

  <!--列表-->
  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
    <el-tab-pane label="账号管理" name="first">
      <el-form ref="accountForm" :model="accountForm" label-width="80px" size="mini">
        <el-form-item label="姓名">
          <el-input v-model="accountForm.adminName"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="accountForm.phone"></el-input>
        </el-form-item>

        <el-form-item size="large">
          <el-button v-perm="'employee/modify'"  type="primary" @click="onSubmit">确定</el-button>

        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="修改密码" name="second">
      <el-form :model="updPswForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldPsw">
          <el-input type="password" v-model="updPswForm.oldPsw" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <div class="password-input-wrapper">
            <el-input type="password" v-model="updPswForm.password" autocomplete="off" show-password></el-input>
            <el-tooltip effect="dark" content="密码长度至少8位，包含大小写字母和字符" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePsw">
          <el-input type="password" v-model="updPswForm.rePsw" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-perm="'employee/modifyPassword'" type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button  @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>


</template>
<script>

export default {

  data() {


    return {
      activeName: 'first',
      accountForm: {//账号管理
        loginId:'',
        adminName: '',
        phone: '',
      },
      updPswForm: {//修改密码
        loginId:'',
        password: '',
        oldPsw: '',
        rePsw: '',
      },
      passwordMismatch: false,

      //表单规则
      ruleForm: {
        loginId:'',
        pass: '',
        checkPass: '',
      },
      rules: {
        oldPsw: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
          // 可以添加其他规则
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 8, message: '密码长度至少为8位', trigger: 'blur' },
          { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/, message: '密码必须包含大小写字母、数字和特殊字符', trigger: 'blur' }
        ],
        rePsw: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      }


    };

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
  },
  mounted() {
    // 在页面加载时获取当前登录人的信息并填充到表单中
    this.fetchCurrentUser();
  },
  beforeDestroy() {
    // 组件销毁前清空表单数据
    this.updPswForm.oldPsw = '';
    this.updPswForm.password = '';
    this.updPswForm.rePsw = '';
  },
  methods: {
    fetchCurrentUser() {
      // 获取登录人信息
      const logininfo = JSON.parse(localStorage.getItem("logininfo"));
      // 填充表单数据
      this.accountForm.adminName = logininfo.username;  // 使用你实际的字段名
      this.accountForm.phone = logininfo.phone;  // 假设登录信息中有一个名为 phone 的字段
      this.accountForm.loginId=logininfo.id;     //登录人的id
      this.updPswForm.loginId=logininfo.id;
    },
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.updPswForm.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
        // 在切换标签页时清空相关数据
        if (tab.name === 'second') {
          this.updPswForm.oldPsw = '';
          this.updPswForm.password = '';
          this.updPswForm.rePsw = '';
        }
      },


    //账号管理的提交方法
    onSubmit: function () {
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {

            let para = Object.assign({}, this.accountForm);
            this.$http.put("/employee/modify", para).then(res => {
              if (res.data.success) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['accountForm'].resetFields();
                window.location.reload();  // 刷新页面
              } else {
                this.$message.warning("系统繁忙，请稍后重试!!!");
              }
            });
          });
        }
      });
    },

//密码修改
    submitForm: function (){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {

            let para = Object.assign({}, this.updPswForm);
            this.$http.put("/employee/modifyPassword", para).then(res => {
              if (res.data.success) {
                this.$message({
                  message:'密码修改成功，请稍后重新登录！',
                  type: 'success'
                });
                this.$refs['ruleForm'].resetFields();
                window.location.reload();  // 刷新页面
              } else {
                this.$message.warning(res.data.message||"系统繁忙，请稍后重试!!!");
              }
            });
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  }

};

</script>
<style scoped>
.password-input-wrapper {
  display: flex;
  align-items: center;
}
</style>